<template>
  <div style="width:100%;height:100%;" id="defectDensity"></div>
</template>

<script>
  const echarts = require('echarts');
  export default {
    name: 'defectDensity',
    props: {
      defectDensity: Array,
    },
    data() {
      return {};
    },
    methods: {
      init() {
        let defectDensity = this.defectDensity;
        let defectDensityMap = echarts.init(document.getElementById('defectDensity'));
        let labelOption = {
          normal: {
            show: true,
            textColor: '#000000',
            formatter: '{c}%',
            textStyle: {
              fontSize: 16
            }
          }
        };
        let option = {
          title: {
            text: '项目质量',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'value',
              // splitLine: {show: false},
              // axisLabel: {show: false},
              // axisTick: {show: false},
              // axisLine: {show: false}
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: [ 'UAT缺陷遗漏率', 'SIT缺陷遗漏率','生产缺陷率','SIT缺陷率','总缺陷率'],
              axisLine: {show: false},
              axisTick: {show: false},
              max: 4,
              axisLabel: {
                formatter: '{value}'
              },
            }
          ],
          grid: {
            left:'20%',
            top: '20%',
            bottom: '15%'
      },
          series: [
            {
              name: '项目质量',
              type: 'bar',
              barWidth: '20px',
              label: labelOption,
              barCateGoryGap:'80%',
              data: [
                {
                  value: parseFloat(defectDensity.uatDensity),
                  itemStyle: {
                    normal: {
                      color:parseFloat(defectDensity.uatDensity) > 6 ? '#ff9f7f' : '#2D8cF0',
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: parseFloat(defectDensity.uatDensity) < 20 ? 'right' : 'inside',
                    }
                  }
                },{
                  value: parseFloat(defectDensity.datDensity),
                  itemStyle: {
                    normal: {
                      color:parseFloat(defectDensity.datDensity) > 15 ? '#ff9f7f' : '#2D8cF0'
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: parseFloat(defectDensity.datDensity) < 20 ? 'right' : 'inside',
                    }
                  }
                },
                {
                  value: parseFloat(defectDensity.prdDefect),
                  itemStyle: {
                    normal: {
                      color:parseFloat(defectDensity.prdDefect) > 1.5 ? '#ff9f7f' : '#2D8cF0'
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: parseFloat(defectDensity.prdDefect) < 20 ? 'right' : 'inside',
                    }
                  }
                },
                {
                  value: parseFloat(defectDensity.datDefect),
                  itemStyle: {
                    normal: {
                      color:parseFloat(defectDensity.datDefect) > 4 ? '#ff9f7f' : '#2D8cF0'
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: parseFloat(defectDensity.datDefect) < 20 ? 'right' : 'inside',
                    }
                  }
                },
                {
                  value: parseFloat(defectDensity.hotalDefect),
                  itemStyle: {
                    normal: {
                      color:parseFloat(defectDensity.hotalDefect) > 6 ? '#ff9f7f' : '#2D8cF0'
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: parseFloat(defectDensity.hotalDefect) < 20 ? 'right' : 'inside',
                    }
                  }
                },
              ]
            }
          ]
        };
        defectDensityMap.setOption(option);
        window.addEventListener('resize', function () {
          defectDensityMap.resize();
        });
        defectDensityMap.on('click', (params) => {
          this.$Message.info(params.name+'的'+params.seriesName+'为：'+params.value)
        });
      }
    },
    watch: {
      defectDensity: {
        handler() {
          this.init()
        },
        deep: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.init()
      });
    }
  };
</script>

<style scoped>

</style>
